
import React from 'react'
import { View, Text, ScrollView, TouchableHighlight  } from 'react-native'
//import Icon from '../common/font-set/index'

class List extends React.Component {
  static navigationOptions = () => {
    
    return {
      title: 'List'
    }
  }

  constructor(ops) {
    super(ops)
    this.state = { list: [] }
    this.jumpToDetailBind = this.jumpToDetail.bind(this)
  }

  componentDidMount() {
    let list = [ 'SvgView', 'CanvasView', 'J3DView','J3DCupView', 'MaskedViewDemo', 'ZW_3D' ]

    this.setState({ list })
  }

  render() {

    return (
      <View>
        <Text style={{ 
          paddingBottom: 20, 
          paddingTop: 20, 
          fontSize: 30, 
          textAlign: "center",
          borderBottomWidth: 1,
          borderBottomColor: "#333" 
        }}>List Page</Text>
        <ScrollView>
        {
          this.state.list.map((item, index) => {

            return (
              <TouchableHighlight 
              key={index}
              onPress={ () => this.jumpToDetailBind(item) }
              style={{ 
                paddingTop: 15, 
                paddingBottom: 15, 
                justifyContent: "center",
                alignItems: "center",
                borderBottomWidth: 1, 
                borderBottomColor: '#999',
                flexDirection: "row"
              }}>
                {/* <Icon name="arrow-left" size={30} color="#900" /> */}
                <Text
                style={{ marginLeft: 20, fontSize: 20 }}>
                { item }
                </Text>
              </TouchableHighlight>
            )
          })
        }
        </ScrollView>
      </View>
    )
  }

  jumpToDetail(item) {

    this.props.navigation.navigate(item)
  }
}

export default List